import React, { Component } from 'react'
import axios from 'axios'
import { Tabs } from 'react-vant'
import 'react-vant/lib/index.css'

class Home extends Component {

    state = {
        list: [],
        i: 0
    }

    componentDidMount() {
        axios.get('/api/list').then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    clickBtn(index) {
        this.setState({
            i: index
        })
    }

    render() {
        let { list } = this.state
        return (
            <div className='Home'>
                {/* <div className='dh'>
                    <ul>
                        {
                            list && list.length ? list.map((item, index) => {
                                return <li key={index} className={i === index ? 'active' : ''} onClick={
                                    this.clickBtn.bind(this, index)
                                }>{item.title}</li>
                            }) : ''
                        }
                    </ul>
                </div>
                <div>
                    {
                        list && list.length ? list[i].children.map((item, index) => {
                            return <p key={index}>{item.word}</p>
                        }) : ''
                    }
                </div> */}
                <Tabs>
                    {list.map((item,index) => (
                        <Tabs.TabPane key={index} title={item.title}>
                            内容 {item.title}
                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>
        )
    }
}

export default Home